<!-- tabbar -- 运单页面 -->
<template>
	<view>
		<view class="search clearFix">
			<u-search placeholder="请输入车牌号/出发地/到达地/项目/线路搜索" v-model="keyword" shape="round" :show-action="false"  @click.native="goSearch"></u-search>
		<u-icon name="calendar" size="65" @click="show = true"></u-icon>
		</view>
		<view><u-calendar :mode="mode" v-model="show" ></u-calendar></view>
		<u-tabs :list="list" :is-scroll="false" :current="current" @change="change" bar-width="90" active-color="#4f33d7"></u-tabs>
		<view class="main">
			
			<p v-show="current == 0">
				<view class="Waybill" v-for="(item) in Waybill">
					<p><u-icon name="map" size="30"></u-icon>装货地点：{{item.origin}}</p>
					<p><u-icon name="map-fill" size="30"></u-icon>卸货地点：{{item.destination}}</p>
					<p><u-icon name="phone" size="30"></u-icon>联系人：{{item.name}}</p>
					<p><u-icon name="account" size="30"></u-icon>电话：{{item.contact}}</p>
					<p><u-icon name="rmb" size="30"></u-icon>价格：￥{{item.price}}</p>
				</view>
			</p>
		<view v-show="current == 1"><img src="../../static/img/error_icon.png" /><p>暂时没有运输中运单</p></view>
		<view v-show="current == 2"><img src="../../static/img/error_icon.png" /><p>暂时没有已完成运单</p></view>
		<view v-show="current == 3"><img src="../../static/img/error_icon.png" /><p>暂时没有已作废运单</p></view>
		</view>
		<!-- 底部导航 -->
		<u-tabbar :list="tabbar"></u-tabbar>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
import {getWaybill} from '../../api/index.js'
export default {
	data() {
		return {
			keyword: '',

			list: [
				{
					name: '待确认',
					count: 6
				},
				{
					name: '运输中'
				},
				{
					name: '已完成',
				},
				{
					name: '已作废'
				}
			],
			current: 0,
			show: false,
			mode: 'date',
			Waybill : [] // 运单信息
		};
	},
	computed: {
		...mapGetters(['tabbar'])
	},
	mounted(){
		this.getWaybillInfo();
	},
	methods: {
		change(index) {
			this.current = index;
		},
		goSearch() {
			uni.navigateTo({
				url: '/pages/waybill/search'
			});
		},
		// 获取运单数据		getWaybillInfo(){			getWaybill({}).then((res) => {			const {data} = res			this.Waybill = data.data			}).catch(err => {				uni.showToast({					title: '获取数据失败:' + err,					duration: 1000,					icon: "none"				})			})		}
	}
};
</script>
<style lang="less">
page {
	width: 100%;
	height: 100%;
}
.clearFix:after {
    content: " ";
    /*  clear:both要在块元素下才生效，所以要写display: block; */
    display: block;
    clear: both;
}
// 搜索框
.search {
	u-search {
		float: left;
		height: 50upx;
		line-height: 50upx;
		width: 640upx;
		padding: 12upx 0 30upx 12upx;
	}
	u-icon {
		float: right;
		height: 50upx;
		line-height: 50upx;
		padding: 12upx;
	}
}
.u-input.data-v-1a326067 {
	font-size: 24upx !important;
}
.u-content.data-v-1a326067 {
	height: 36upx;

}
// 选项标签
.u-tab-item.data-v-0de61367 {
	border-right: 1upx solid #e4e1e4;
}
.u-tab-item.data-v-0de61367:last-child {
	border-right: none;
}
.u-badge--bg--error.data-v-662d25bf {
	background-color: #4f33d7 !important;
}
.u-tabs-scorll-flex.data-v-0de61367 {
	border-top: 1upx solid #e4e1e4;
	padding-top: 5upx;
}
// 显示内容区域
.main {
	img {
		width: 450upx;
		margin: 0 auto;
		display: block;
		margin-top : 50upx;
	}
	p {
		text-align: center;
		color: #85849a;
	}
	.Waybill {
		margin: 20upx;
		padding: 20upx;
		color: #000000;
		background-color: rgba(147, 112, 219, 0.05);
		border-radius: 30px;
		._p  {
			padding: 10upx;
			color: #606266;
			text-align: left;
		}
		.u-icon__icon.data-v-172979f2 {
			padding-right:10upx;
		}
	}
}

</style>
